<template>
  <div>
    <!-- 查询 -->
    <div class="search_box" style="width: 95%;">
      <el-row :gutter="20">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline" ref="searchFormRef">
          <el-col :span="6">
            <el-form-item label="异常编码" prop='errorCode'>
              <el-input v-model="searchForm.errorCode" size="small" placeholder="请输入异常编码"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="异常信息" prop="errorMess">
              <el-input v-model="searchForm.errorMess" size="small" placeholder="请输入异常信息"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="异常url" prop="errorUrl">
              <el-input v-model="searchForm.errorUrl" size="small" placeholder="请输入异常url"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="6">
            <el-form-item>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="异常时间" prop="startTime">
              <el-input v-model="searchForm.startTime" type="date" size="small" placeholder="异常时间开始"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="异常时间" prop="endTime">
              <el-input v-model="searchForm.endTime" type="date" size="small" placeholder="异常时间结束"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="6" style="padding-left:140px">
            <el-button type="primary" size="small" @click="onSubmitSearch">查询</el-button>
            <el-button type="primary" size="small" @click="restSearch()">重置</el-button>
          </el-col>
        </el-form>
      </el-row>
    </div>

    <!-- 列表展示页面 -->
    <el-table :header-cell-style="{background:'LightYellow	',color:'black'}" :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%">

      <el-table-column label="异常编码" prop="errorCode" size="small">
      </el-table-column>


      <el-table-column label="异常信息" prop="errorMess" size="small">
      </el-table-column>

      <el-table-column label="异常url" prop="errorUrl" size="small">
      </el-table-column>


      <el-table-column label="时间戳字段" prop="timeStamp" size="small">
      </el-table-column>

      <el-table-column label="操作" width="80%" center>
        <template slot-scope="scope">
          <el-button type="text" @click="handleSaveOrUpdate(scope.$index, scope.row)">详情</el-button>
          <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>


    </el-table>

    <div class="pageBox">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5,10, 15,20]" :page-size="pageSize" :total="total"   layout="total, sizes, prev, pager,next, slot, jumper">
      </el-pagination>
    </div>



    <el-dialog title="查看日志" :visible.sync="SaveOrUpdateDialog" width="50%">
      <el-form ref="form" :model="SaveOrUpdateForm" label-width="80px">

        <el-form-item label="错误日志id">
          <el-input v-model="SaveOrUpdateForm.id"  placeholder="错误日志id" :disabled="true"></el-input>
        </el-form-item>


        <el-form-item label="异常编码">
          <el-input v-model="SaveOrUpdateForm.errorCode"  placeholder="异常编码" :disabled="true"></el-input>
        </el-form-item>


        <el-form-item label="异常信息">
          <el-input v-model="SaveOrUpdateForm.errorMess"  placeholder="异常信息" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="异常Url">
          <el-input v-model="SaveOrUpdateForm.errorUrl"  placeholder="异常Url" :disabled="true"></el-input>
        </el-form-item>


        <el-form-item label="时间戳">
          <el-input v-model="SaveOrUpdateForm.timeStamp"  placeholder="时间戳字段" :disabled="true"></el-input>
        </el-form-item>

      </el-form>
    </el-dialog>

  </div>
</template>

<script>
  import {
    cmcUrl
  } from '../../../static/baseUrl';
  import {
    Message
  } from "element-ui";
  export default {
    data() {
      return {
        searchForm: {
          startTime: "",
          endTime: "",
          errorCode: "",
          errorMess: "",
          errorUrl: "",
        },
        currentPage: 1,
        total: 0,
        pageSize: 5,
        SaveOrUpdateForm: {},
        SaveOrUpdateDialog: false,
        search: '',
        tableData: [],
      }
    },
    methods: {
      /* 定向 搜索 */
      onSubmitSearch() {
        this.initData();
      },
      /* 重置 搜索 */
      restSearch() {
        this.$refs.searchFormRef.resetFields();
      },
      handleCurrentChange(data) {
        this.currentPage = data;
        this.initData();
      },
      handleSizeChange(data) {
        this.pageSize = data;
        this.initData();
      },
      handleSaveOrUpdate(index, row) {
        this.SaveOrUpdateDialog = true;
        this.SaveOrUpdateForm = row;
      },
      initData() {
        this.$axios({
            method: "post",
            url: `/CMC/errorlog/list`,
            params: {
              page: this.currentPage,
              pageSize: this.pageSize,
              errorCode: this.searchForm.errorCode,
              errorMess: this.searchForm.errorMess,
              errorUrl: this.searchForm.errorUrl,
              /* 时间段  参数*/
              startTime: this.searchForm.startTime,
              endTime: this.searchForm.endTime,
            }
          })
          .then((res) => {
            if (res.code == 200) {
              this.tableData = res.data.list;
              this.total = Number(res.data.total);
            } else {
              Message.warning(res.message);
            }
          })
          .catch((err) => {});
      },

    },
    created() {
      this.initData();
    }
  }
</script>
<style lang="scss" scoped>
  .divisional {
    /deep/ .el-row:nth-child(1) {
      width: 100%;
      height: 1px;
      // background: pink;
      padding: 0;
      margin: 0;

      .el-col {
        padding: 0;
        height: inherit;
        /* border: 1px solid slategrey; */
        box-sizing: border-box;
        overflow: hidden;

        div:nth-child(1) {
          width: 100%;
          height: inherit;
          //   background: yellowgreen;
          display: flex;
          flex-wrap: wrap;
          // justify-content: flex-start;
          justify-content: space-around;
          box-sizing: border-box;
          /* padding-left: 30px;
           padding-top: 40px; */
          overflow-y: auto;

          .v_box {
            width: 20%;
            height: 8vh;
            margin-left: 15px;
            margin-right: 40px;
            // margin-bottom: 10px;
            // background: chocolate;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding: 0;
            border: none;

            div {
              padding: 0;
            }

            &:nth-child(7) {

              .el-date-editor--daterange.el-input,
              .el-date-editor--daterange.el-input__inner,
              .el-date-editor--timerange.el-input,
              .el-date-editor--timerange.el-input__inner {
                width: 100%;
              }
            }

            &:last-child {
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;

              .el-button {
                width: 70px;
                height: 30px;

                &:first-child {
                  margin-right: 10px;
                }
              }
            }
          }
        }
      }
    }

    /deep/ .el-row:nth-child(2) {
      width: 100%;
      /* height: 60vh; */
      // background: pink;
      padding: 0;
      margin: 0;
      margin-top: 10px;

      table {
        tbody {
          tr {
            td {
              .cell {
                box-sizing: border-box;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-break: normal !important;
                line-height: inherit;
                //   padding-right: 10px;
              }
            }
          }
        }
      }
    }

    .pageBox {
      display: flex;
      width: 100%;
      justify-content: left;
      margin-top: 10px;
    }


    /deep/ .el-dialog {
      .mainInfoBox {
        width: 100%;
        max-height: 60vh;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        overflow-y: auto;

        .infoBox {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          height: 40px;
          width: 30%;

          label {
            width: 100px;
          }

          .el-input {
            flex: 1 1 auto;
          }
        }
      }
    }
  }


  .search_box {
    background: #fff;
    border-radius: 10px;
    padding: 40px;
    margin: 0 0 20px 0;
  }

  .box_center {
    text-align: left;
  }

  .searchBtn {
    margin-left: 80px;
  }

  .search_box .inpText {
    width: 75px;
    justify-content: space-between;
    text-align: right;
    display: inline-block;
  }
</style>
